<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title> 
<!-- 引入element样式 -->
<link rel="stylesheet"
	href="../public/plugins/element-ui/lib/theme-chalk/index.css">
<script src="../public/libs/vue.js"></script>
<!--引入element组件库-->
<script src="../public/plugins/element-ui/lib/index.js"></script>
<script src="../public/plugins/axios/dist/axios.js"></script> 
</head>
<body>
	<div id="headVue"  >
		<div style="background-color:#87CEEB" align="center">
			<el-row :gutter=10 > </el-row>
			<el-row :gutter=10 type="flex" justify="center" > 
				<el-col :span=8>
					 客户编码: 
				
					<el-input v-model="tableHead.cardCode" size="mini" placeholder="客户编码" style=" display:inline-block;width: 65%;"></el-input>
				</el-col> 
				<el-col :span=8> 客户名称: 
					<el-input	v-model="tableHead.cardName" size="mini" placeholder="客户名称" style=" display:inline-block;width: 65%;"></el-input>	
				</el-col> 
				<el-col :span=8> 交货地点: 
					<el-input v-model="tableHead.delivery" size="mini" placeholder="交货地点" style=" display:inline-block;width: 65%;"></el-input> 
				</el-col> 
			</el-row>
			<el-row :gutter=10 type="flex" justify="center">
				<el-col :span=8> 报价类型: 
					<el-select v-model="tableHead.qtnType" placeholder="报价类型" size="mini"  style=" display:inline-block;width: 65%;">       
						<el-option label="甲板" value="甲板"></el-option>                 
						<el-option label="渔具" value="渔具"></el-option>   
						<el-option label="全船" value="全船"></el-option>
						<el-option label="其他" value="其他"></el-option>       
					</el-select> 
				</el-col> 
				<el-col :span=8> 交易类型: 
					<el-select v-model="tableHead.tradeType" placeholder="交易类型" size="mini"  style=" display:inline-block;width: 65%;">       
						<el-option label="内贸自制" value="内贸自制"></el-option>
		                <el-option label="外贸自制" value="外贸自制"></el-option>   
						<el-option label="国内贸易" value="国内贸易"></el-option>                 
						<el-option label="出口贸易" value="出口贸易"></el-option>   
						<el-option label="进口贸易" value="进口贸易"></el-option>                
						<el-option label="转口贸易" value="转口贸易"></el-option>
		            </el-select> 
				</el-col> 	
				<el-col :span=8> 报价主题: 
					<el-input type="text" v-model="tableHead.qtnTopic" size="mini" placeholder="报价主题" style=" display:inline-block;width: 65%;"></el-input>
				</el-col> 
			</el-row>
			<el-row :gutter=10 type="flex" justify="center">
				<el-col :span=8>合同编号:
					<el-input v-model="tableHead.contractNo" size="mini" placeholder="合同编号" style=" display:inline-block;width: 65%;"></el-input></el-input> 
				</el-col> 
				<el-col :span=8>合同金额:
					<el-input v-model="tableHead.contractAmt" size="mini" placeholder="合同金额"
					 oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" style=" display:inline-block;width: 65%;"></el-input></el-input> 
				</el-col> 
				<el-col :span=8>合同时间:
					<el-date-picker    v-model="tableHead.contractTime" type="date"
						 placeholder="选择日期" size="mini"  style="display:inline-block;width: 65%"> </el-date-picker> 
				</el-col> 				
			</el-row>
			<el-row  :gutter=10 type="flex" justify="center"> 
				<el-col :span=24>内部备注:
					<el-input type="textarea" :rows="2" v-model="tableHead.inMemo" size=mini 
						placeholder="请输入备注内容" style="width:850px;"></el-input> 
				</el-col> 
			</el-row> 
			<el-row :gutter=10 type="flex" justify="center"> 
				<el-col :span=24>外部备注:
					<el-input type="textarea" :rows="2" v-model="tableHead.outMemo" size=mini 
						placeholder="请输入备注内容" style="width:850px;"></el-input> 
				 </el-col> 
			</el-row> 
			<el-row  :gutter=10 type="flex" justify="center"> 
				<el-col :span=5>  
					<span >报价ID：{{tableHead.id}}</span>
				  </el-col>
				<el-col :span=5> 
					<span >报价编号：{{tableHead.quotationNo}}</span>
				</el-col>
				<el-col :span=5>项目状态：
					<span v-if="tableHead.status == 0">尚未登记</span> 
					<span v-if="tableHead.status == 1">完成正常登记</span>
					<span v-if="tableHead.status == 2">完成技术核算</span> 
					<span v-if="tableHead.status == 3">完成财务核算</span>
					<span v-if="tableHead.status == 4">完成打单</span> 
					<span v-if="tableHead.status == 5">完成打印</span>
					<span v-if="tableHead.status == 6">作废</span>
				</el-col> 
				<el-col :span=5>业务人员:
					<span >{{tableHead.trueName}}</span>
				</el-col> 	
			</el-row> 
					
			<el-row  :gutter=10 type="flex" justify="center">
				<el-col :span=21>
					<el-button size="mini" type="info" icon="el-icon-document-checked" @click="saveHead">保存基本信息</el-button> 
					<el-button size="mini" type="warning" icon="el-icon-scissors"  @click="clear">清空报价数据</el-button> 
					<el-button size="mini" type="primary" icon="el-icon-top" @click="uploadFile($event)" name="上传你的上传">上传报价附件</el-button>	
				</el-col>
			</el-row>
			<el-row  :gutter=10 type="flex" justify="center">
				<el-col><span style="font-size:12px; color:red">{{Msg}}</span></el-col>
			</el-row>
			<!--新增产品-->
			<el-row :gutter=10 type="flex" justify="center">
				
				<el-col :span=3> 
					<el-input v-model="prodAddData.productName" size="mini" placeholder="初步名称"></el-input>
				</el-col>				
				<el-col :span=3> 
					<el-input v-model="prodAddData.confirmName" size="mini" placeholder="确定名称"></el-input>
				</el-col>				
				<el-col :span=3>  
					<el-input v-model="prodAddData.productCode" size="mini" placeholder="产品编码"></el-input>
				</el-col>
				<el-col :span=3>
					<el-input v-model="prodAddData.specification" size="mini" placeholder="规格型号"></el-input>
				</el-col>
				<el-col :span=3> 
					<el-input v-model="prodAddData.unit" size="mini" placeholder="单位"></el-input>
				</el-col>
				<el-col :span=3> 
					<el-input v-model="prodAddData.quantity" size="mini" placeholder="数量"></el-input>
				</el-col>	
				<el-col  :span=2 align="center"> 
					<el-button size="mini" type="primary" icon="el-icon-document-checked" @click="saveProd">新增产品</el-button>
				</el-col>	
			</el-row>
		</div>
		<!-- 编辑产品信息-->
		<!--产品列表-->
		<el-table :data="prodLines"	size="mini"  :header-cell-style="{'text-align':'center',background:'#eef1f6',color:'#0000FF'}"
			ref="prodLines"  border style="background-color: bisque;">                
			<el-table-column label="ID" prop="id" >
				</el-table-column>
				<el-table-column prop="quotationID" label="报价ID">					
				</el-table-column>
				<el-table-column prop="productName" label="初步名称">
				</el-table-column>
				<el-table-column prop="confirmName" label="确定名称">
				</el-table-column>
				<el-table-column prop="productCode" label="产品编码">
				</el-table-column>
				<el-table-column prop="specification" label="规格">
				</el-table-column>
				<el-table-column prop="unit" label="单位">
				</el-table-column>
				<el-table-column prop="quantity" label="数量">
				</el-table-column>
				<el-table-column label="操作"	style="width:100 ;" align="center"> 
					<template slot-scope="rowData">
						<el-button	size="mini" type="danger" icon="el-icon-document-delete" @click="delRow('prod',rowData.row)">删除</el-button> 
					</template> 
				</el-table-columm>
		</el-table> 
		<p></p>
		
<!--附件列表-->
	<el-table :data="attachLines" size="mini" border :show-header="true"
			:header-cell-style="{'text-align':'center','font-size':'14px',background:'#eef1f6',color:'#000000'}"
			ref="prodWin" style="background-color: bisque;width:100%;"> 
			<el-table-column label="ID" prop="id" width="70" >
			</el-table-column>
			<el-table-column prop="quotationID" label="报价ID" width="70">					
			</el-table-column>
			<el-table-column prop="fileName" label="文件名称" width="350">
			</el-table-column>
			<el-table-column prop="transTime" label="上传时间">		
			</el-table-column>				
			<el-table-column prop="trueName" label="上传用户">
			</el-table-column>			
			<el-table-column label="操作"	style="width:100 ;" align="center"> 
				<template slot-scope="rowData">
					<el-button	size="mini" type="primary" @click="delRow('attach',rowData.row)">删除</el-button> 
				</template> 
			</el-table-columm>
			
	</el-table> 
	<!--上传附件-->
	<el-dialog title="upload" width="40%" :visible.sync="uploadTemplateDialog" ref="eDialog">
		<el-row>
			<el-col ::span="22">
				<el-upload class="upload-demo" ref="upload" action="" :accept="acceptFileType"
					:limit="5" :on-exceed="handleExceed" :before-upload="beforeUpload"
					:on-preview="handlePreview" :on-remove="handleRemove"
					:file-list="fileList" :auto-upload="false" >
					<el-button slot="trigger" size="small" type="primary">请选取上传的附件</el-button>
					<div slot="tip" class="el-upload_tip">文件名请用中英文,且不超过10M</div>
				</el-upload>
				
		</el-col>
		</el-row>
		<span slot="footer" class="dialog-footer">
			<el-button @click="submitUpload" type="primary" size="mini" :loading="uploadLoading" > 确定上传</el-button>
			<el-button @click="uploadTemplateDialog=false" size="mini">取消</el-button>
		</span>
	</el-dialog>
	<el-backtop></el-backtop>
	</div>
	
	
<script>
var head = new Vue({ 
	el: "#headVue",
	data:{
			prodLines: [{id:0,quotationID:null,productName:"",confirmName:"",
				productCode:"",specification:"",unit:"",quantity:""}],
			prodAddData:{id:0,quotationID:0,productName:"",confirmName:"",
				productCode:"",specification:"",unit:"",quantity:0},
			attachLines:[],
			fileList:[{name:"",url:""}],
			tableHead: {id:0,cardCode: "",cardName:"",deliver:"",
				qtnType:"",tradeType:"",qtnTopic:"",trueName:localStorage.getItem("trueName"),
		      	quotationNo:"",department:"",status:0,remark:""},
			tableHeadEmpty: {id:0,cardCode: "",cardName:"",deliver:"",
				qtnType:"",tradeType:"",qtnTopic:"",
		      	quotationNo:"",department:"",status:0,remark:""},
	      	uploadTemplateDialog:false,
           	fileList:[],
           	uploadLoading:false,
           	acceptFileType: '*.*',//'.xls,.xlsx',
           	downLoadLoading:'',
			fType:'',Msg:'先保存基本信息，再添加附件和产品！'
		},
	methods: 
	{ 
		delRow:function(val){

		},
		
		handleChange:function(val){
				//this.currentRow = val;
			},
		clear:function(){
			this.tableHead=this.tableHeadEmpty;
			this.Msg='';
			this.attachLines=[];
			this.prodLines=[];
			this.prodAddData={};
		},
		saveProd:function(){
			if(this.prodAddData.quotationID==0) return false;
            var that=this;
            axios({
                method:'post',
                url:'../erp/quotation/product/save',
                data:this.prodAddData
               // headers:{"Content-Type":"multipart/form-data"}
            }).then(rsp=>{
                let resp=rsp.data;
                if(resp.code=="200"){
					that.prodLines=resp.prodLines;	
					                     
                }
            }).catch(error=> {     })
            return false;
			
		},
		saveHead:function(){
			if(this.tableHead.id!=0) return false;
			
			//if(this.tableHead.quotationNo==""){alert("报价编号不能为空！");return false;}
			if(this.tableHead.cardName==""){alert("除合同、备注外其余不能为空！");return false;}
			if(this.tableHead.qtnType==""){alert("除合同、备注外其余不能为空！");return false;}
			if(this.tableHead.tradeType==""){alert("除合同、备注外其余不能为空！");return false;}
			if(this.tableHead.qtnTopic==""){alert("除合同、备注外其余不能为空！！");return false;}
            var that=this;
            //let form = this.$refs['head'].$el;
    		//let formData = new FormData(form);
            axios({
                method:'post',
                url:'../erp/quotation/head/save',
                data:this.tableHead
               // headers:{"Content-Type":"multipart/form-data"}
            }).then(rsp=>{
                let resp=rsp.data;
                if(resp.code==200){
					that.tableHead=resp.tableHead;			
					that.prodAddData.quotationID=resp.tableHead.id;
					that.Msg="请上传"+resp.tableHead.quotationNo+"的附件，并下拉添加产品信息！";	
                    that.$message({
                        type:'success',
                        showClose:true,
                        duration:60000,
                        message:"已新增1条标价记录！"
                    });                    
				}
				else if(resp.code==250)
				{
					that.$message({
                        type:'error',
                        showClose:true,
                        duration:60000,
                        message:"发生错误，数据未能保存！"
                    });  
				}
				else if(resp.code==500)
				{
					that.$message({
                        type:'error',
                        showClose:true,
                        duration:60000,
                        message:"此报价编号已存在！"
                    });  
				}
            }).catch(error=> {
                that.$message({
                    type:'error',
                    showClose:true,
                    duration:60000,
                    message:'请求失败! error:'+error
                });
			});
			return false;
		},
        //upFile(event){myUploadVue.$options.methods.uploadFile(event);}
		uploadFile:function(event){
			if(this.tableHead.id=="" || this.tableHead.id==0) return;
			var el = event.currentTarget;
            this.uploadLoading=false;
            
            var that=this;
            this.fileList=[];                
            this.uploadTemplateDialog=true;  
            
            setTimeout(function(){
                that.$refs.upload.clearFiles();
                that.$refs.eDialog.title=el.name;
            },100);
        },
        handleExceed:function(files,fileList){
            this.$message.warning(' 最多选择5个文件!');
        },
        submitUpload:function(){
            this.uploadLoading=true;
            var that=this;
            setTimeout(function () {
                if(that.$refs.upload.$children[0].fileList.length<=5){
                    that.$refs.upload.submit();
                }else{
                    that.uploadLoading=false;
                    that.$message({
                        type:'error',
                        showClose:true,
                        duration:3000,
                        message:'请选择文件!'
                    });
                };
            },100);
        },
        handleRemove:function(file,fileList){
            //console.log(file,fileList);
        },
        handlePreview:function(file){
            //console.log(file);
        },
        beforeUpload:function(file){
            var that=this;
            //文件类型
            var fileName=file.name.substring(file.name.lastIndexOf('.')+1);
            var fileSize=file.size;
            console.log("fileName"+fileName);
            if(fileSize>10485760){
                that.uploadTemplateDialog=false;
                that.$message({
                    type:'error',
                    showClose:true,
                    duration:3000,
                    message:'文件不能大于10M!'
                });
                return false;
			}
			
            that.downloadLoading=that.$loading({
                lock:false,
                text:'数据上传中...',
                spinner:'el-icon-loading',
                background:'rgba(0,0,0,0.7)'
            });
            let fd=new FormData();
            fd.append('file',file);           
			//fd.append('fileType',that.fType);
			fd.append("quotationNo",this.tableHead.quotationNo);
			fd.append("quotationID",this.tableHead.id);			
            axios({
                method:'post',
                url:'../erp/quotation/attach/upload',
                data:fd,
                headers:{"Content-Type":"multipart/form-data"}
            }).then(rsp=>{
				
                that.downloadLoading.close();
                that.uploadLoading=false;
                let resp=rsp.data
                if(resp.code==2){
					that.uploadTemplateDialog=false;
					that.attachLines=resp.attachLines;
                    //that.$message.success(resp.retMsg);
                    that.$message({
                        type:'success',
                        showClose:true,
                        duration:60000,
                        message:resp.record>0 ?"附件已成功上传并录入数据库!":"上传成功，写入数据库失败！"
                    });
                    
                }else{
                    that.uploadTemplateDialog=false;
                    that.$message({
                        type:'error',
                        showClose:true,
                        duration:60000,
                        message:"附件上传失败！"
                    });
                }
            }).catch(error=> {
                that.downloadLoading.close();
                that.uploadLoading=false;
                that.uploadTemplateDialog=false;
                that.$message({
                    type:'error',
                    showClose:true,
                    duration:60000,
                    message:'请求失败! error:'+error
                });
            })
            return false;
        }
	}
});


</script>

<style scoped>
	*{	
		 font-size:14px !important ;
	}

	.el-table{
       width:99.9%!important;
	}
	.el-row {
    margin-bottom: 20px;
    
  }
  el-row:last-child {
      margin-bottom: 0;
    }

  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
 
  .myMargin{
  	margin-left:5%;
  }
</style> 
</body>

</html>
